<template>
  <div>
<!--    标题-->
    <p style="font-size: 0.235rem;font-weight: bolder;color: #CCFFFF;padding-top: 0.1rem;padding-left: 0.1rem">Bug详情</p>
    <p style="font-size: 0.2rem;color: #CCFFFF;padding-top: 0.1rem;padding-left: 0.1rem">{{content}}</p>
<!--    轮播表大小-->
    <div style="width:11.5rem;height:3.8rem;padding-top: 0.1rem">
      <dv-scroll-board id="scroll" :config="config"/>
    </div>
  </div>

</template>

<script>

export default {
  data() {
    return {
      // 返回轮播数据
      config: {
        // 轮播标题
        header:["<span style='font-size:0.18rem;'>Bug负责人</span>",
        "<span style='font-size:0.18rem;'>ID</span>",
        "<span style='font-size:0.18rem;'>Bug状态</span>",
        "<span style='font-size:0.18rem;'>未决时长(天)</span>",
        // "<span style='font-size:14px;'>Bug状态</span>",
        // "<span style='font-size:14px;'>重复性</span>",
        "<span style='font-size:0.18rem;'>Bug详情</span>"],
        // 标题背景色
        headerBGC:'#21618C',
        // 轮播表数据
        data: [],
        // 轮播表宽度
        columnWidth: [this.refontSize(120),this.refontSize(100),this.refontSize(150),this.refontSize(150),],
        // 对齐方式
        // align: ['center'],
        rowNum:5,
      },
      content:''
    }
  },
  components: {

  },
  mounted() {
    this.getbugcount()
    this.getbugdetail()
  },
  methods: {
    // 获取Major以上未决Bug数据
    getbugdetail(){
        this.$http({ method: 'get',
                    url: 'show/buginfo/?system='+this.$route.query.project,}).then(response => {
                    // console.log(response.data);
              // 获取数据并赋给config.data
              var details = []
              if(response.data.detail[0]['bugState']=='DELAY' | response.data.detail[0]['bugState']=='GIVEUP'){
                this.config.header = ["<span style='font-size:0.18rem;'>Bug负责人</span>",
                                      "<span style='font-size:0.18rem;'>ID</span>",
                                      "<span style='font-size:0.18rem;'>Bug状态</span>",
                                      "<span style='font-size:0.18rem;'>Bug详情</span>"]
                this.config.columnWidth = [this.refontSize(120),this.refontSize(100),this.refontSize(150)]
                this.content = '该项目无未解决Bug，展示Delay/Giveup Bug'
              }
              for (var bug in response.data.detail) {
                var oneBug = []
                delete response.data.detail[bug]['stagnateTime']
                for (var b in response.data.detail[bug]) {
                  // oneBug.push(response.data.detail[bug][b])
                  if (b=='bugTime' && response.data.detail[bug][b]>15){
                    oneBug.push("<span style='font-size:0.18rem;color: #FF0000'>"+response.data.detail[bug][b]+"</span>")}
                  else {
                    oneBug.push("<span style='font-size:0.18rem;'>" + response.data.detail[bug][b] + "</span>")
                  }
                }
                details.push(
                    // oneBug.remove('stagnateTime')
                    oneBug
                )
                // console.log(typeof oneBug)
              }
              // console.log(details)
              this.config.data = details
              // 刷新数据
              this.config={...this.config}

                },
                );
    },
    getbugcount(){
      this.$http({ method: 'get',
                    url: 'show/bug_count/?system='+this.$route.query.project,}).then(response => {
                      var count = 0
                      for (var bug in response.data){
                        if (response.data[bug] != 0){
                          count += response.data[bug]
                          this.content += bug + ' Bug '+response.data[bug]+'个，'
                        }
                      }
                      this.content=this.content.slice(0,this.content.length-1)
                      this.content = this.content + '。'
                      this.content = '项目累计未决Bug '+count+'个，其中'+this.content
                    })
    },

  }
}


</script>

<style lang="scss" scoped>
.centerBottom{
  #scroll{
    padding-left: 4rem;
    padding-top: 2rem;
  }
}
</style>